{% extends "base.html" %}

{% block title %}Post New Activity - Volunteer Platform{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-body">
                    <h2 class="card-title mb-4">Post New Activity</h2>
                    
                    <form method="POST" action="{{ url_for('organization_new_activity') }}">
                        <div class="mb-3">
                            <label for="title" class="form-label">Activity Title</label>
                            <input type="text" class="form-control" id="title" name="title" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="description" class="form-label">Activity Description</label>
                            <textarea class="form-control" id="description" name="description" rows="5" required></textarea>
                        </div>
                        
                        <div class="mb-3">
                            <label for="category" class="form-label">Category</label>
                            <select class="form-select" id="category" name="category" required>
                                <option value="">Select Category</option>
                                <option value="education">Education</option>
                                <option value="environment">Environment</option>
                                <option value="healthcare">Healthcare</option>
                                <option value="elderly">Elderly Care</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="start_date" class="form-label">Start Date</label>
                                <input type="datetime-local" class="form-control" id="start_date" name="start_date" required>
                            </div>
                            <div class="col-md-6">
                                <label for="end_date" class="form-label">End Date</label>
                                <input type="datetime-local" class="form-control" id="end_date" name="end_date" required>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="location" class="form-label">Location</label>
                            <input type="text" class="form-control" id="location" name="location" required>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="min_participants" class="form-label">Minimum Participants</label>
                                <input type="number" class="form-control" id="min_participants" name="min_participants" 
                                       min="1" required>
                            </div>
                            <div class="col-md-6">
                                <label for="max_participants" class="form-label">Maximum Participants</label>
                                <input type="number" class="form-control" id="max_participants" name="max_participants" 
                                       min="1" required>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="requirements" class="form-label">Requirements</label>
                            <textarea class="form-control" id="requirements" name="requirements" rows="3"></textarea>
                            <small class="form-text text-muted">Specify any special requirements or skills needed for this activity.</small>
                        </div>
                        
                        <div class="mb-3">
                            <label for="contact_info" class="form-label">Contact Information</label>
                            <textarea class="form-control" id="contact_info" name="contact_info" rows="2"></textarea>
                            <small class="form-text text-muted">Provide contact details for inquiries about this activity.</small>
                        </div>
                        
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary">Submit Activity</button>
                            <a href="{{ url_for('organization_activities') }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 设置日期时间选择器的最小值为当前时间
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const minDateTime = `${year}-${month}-${day}T${hours}:${minutes}`;
    
    document.getElementById('start_date').min = minDateTime;
    document.getElementById('end_date').min = minDateTime;
    
    // 确保结束时间不早于开始时间
    document.getElementById('start_date').addEventListener('change', function() {
        document.getElementById('end_date').min = this.value;
    });
});
</script>
{% endblock %} 